<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                template="#{facesContext.externalContext.requestContextPath}../../resources/template/layout.xhtml">

    <ui:define name="content">

        <h:form id="frm-usuario" prependId="false">

            <p:toolbar id="toolbar">

                <p:toolbarGroup align="left">
                    <h1 class="titulo">
                        Formulário de Moradores
                    </h1>
                </p:toolbarGroup>

                <p:toolbarGroup align="right">

                    <p:ajaxStatus style="float: left; width:16px; height:16px; margin: 7px 7px 0px 0px;">  

                        <f:facet name="start">  
                            <h:graphicImage value="#{facesContext.externalContext.requestContextPath}../../resources/img/ajax.gif" />  
                        </f:facet>  

                        <f:facet name="complete">  
                            <h:outputText value="" />  
                        </f:facet>  

                    </p:ajaxStatus>

                    <p:commandButton id="btn-salvar"
                                     value="Salvar"
                                     image="ui-icon ui-icon-disk"
                                     action="#{moradorBean.salvar()}"
                                     update="grid msg"
                                     tabindex="8" />

                    <p:divider />

                    <p:commandButton id="btn-voltar"
                                     image="ui-icon ui-icon-arrowreturnthick-1-w"
                                     immediate="true"
                                     action="list?faces-redirect=true"
                                     title="Página Anterior"/>

                </p:toolbarGroup>

            </p:toolbar>

            <p:spacer height="15" />

            <p:panel id="panel" header="Dados do Morador">

                <p:messages id="msg" showDetail="true" showSummary="false" />

                <h:panelGrid id="grid" columns="3" cellpadding="5">

                    <h:outputLabel for="nome" value="Nome: " />
                    <p:inputText id="nome" 
                                 value="#{moradorBean.morador.nome}"
                                 maxlength="50" 
                                 style="width: 400px;"
                                 required="true"
                                 tabindex="1"
                                 label="Nome" />
                    <p:message for="nome" display="icon" />

                    <h:outputLabel for="cpf" value="CPF: " />
                    <p:inputMask id="cpf"
                                 mask="999.999.999-99"
                                 value="#{moradorBean.morador.cpf}"
                                 maxlength="14" 
                                 style="width: 100px;"
                                 required="true"
                                 tabindex="2"
                                 label="CPF">
                        <f:validator validatorId="ValidarCPF" />
                    </p:inputMask>
                    <p:message for="cpf" display="icon" />

                    <h:outputLabel for="rg" value="RG: " />
                    <p:inputText id="rg" 
                                 value="#{moradorBean.morador.rg}"
                                 maxlength="14" 
                                 style="width: 100px;"
                                 required="true"
                                 tabindex="3"
                                 label="RG" />
                    <p:message for="rg" display="icon" />

                    <h:outputLabel for="orgao" value="Orgão Emissor: " />
                    <p:inputText id="orgao" 
                                 value="#{moradorBean.morador.orgao}"
                                 maxlength="7" 
                                 style="width: 80px;"
                                 required="true"
                                 tabindex="4"
                                 label="Orgão Emissor" />
                    <p:message for="orgao" display="icon" />

                    <h:outputLabel for="endereco" value="Endereço: " />
                    <p:inputText id="endereco" 
                                 value="#{moradorBean.morador.endereco}"
                                 maxlength="100" 
                                 style="width: 600px;"
                                 required="true"
                                 tabindex="5"
                                 label="Endereço" />
                    <p:message for="endereco" display="icon" />

                    <h:outputLabel for="bairro" value="Bairro: " />
                    <p:inputText id="bairro" 
                                 value="#{moradorBean.morador.bairro}"
                                 maxlength="50" 
                                 style="width: 400px;"
                                 required="false"
                                 tabindex="6"
                                 label="Bairro" />
                    <p:message for="bairro" display="icon" />

                    <h:outputLabel for="telefone" value="Telefone: " />
                    <p:inputMask id="telefone" 
                                 mask="(99) 9999-9999"
                                 value="#{moradorBean.morador.telefone}"
                                 maxlength="14" 
                                 style="width: 100px;"
                                 required="false"
                                 tabindex="7"
                                 label="Telefone" />
                    <p:message for="telefone" display="icon" />

                </h:panelGrid>

            </p:panel>

        </h:form>

    </ui:define>

</ui:composition>